<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基本信息</span>
          </div>
          <div>
            <ul class="user-info">
              <li> 登录账户：<span class="user-right">{{ form.loginName }}</span></li>
              <li> 登录密码: <span class="user-right">************</span>  &nbsp;&nbsp; &nbsp;&nbsp;  &nbsp;&nbsp;  <el-button type="success" size="small" @click="changepsw">修改密码</el-button></li>
              <li> 用户姓名：<span class="user-right">{{ form.name }}</span></li>
              <li> 所属部门: <span class="user-right"> {{ form.departmentName }}</span></li>
              <li> 职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务: <span class="user-right">{{ form.duty }}</span></li>
              <li> 拥有角色: <span class="user-right">{{ roles | namesFilter }}</span></li>
              <li> 岗&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位: <span class="user-right">{{ positions | namesFilter }}</span></li>
            </ul>

          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <el-form
              ref="eform"
              v-loading="formLoading"
              :model="form"
              :rules="rules"
              label-width="100px"
            >
              <div style="text-align: center">
                <el-upload
                  :show-file-list="false"
                  :on-success="handleSuccess"
                  :on-error="handleError"
                  accept="image/jpeg,image/gif,image/png"
                  :headers="headers"
                  :before-upload="beforeAvatarUpload"
                  action="/person/saveAvatar"
                  class="avatar-uploader"
                >
                  <img :src="avatar?avatar:DefaultAvatar" title="点击上传头像" class="avatar">
                </el-upload>
              </div>
              <el-form-item label="移动电话" prop="mobile">
                <el-input v-model.trim="form.mobile" maxlength="20" autocomplete="off" />
              </el-form-item>
              <el-form-item label="联系电话" prop="telephone">
                <el-input v-model.trim="form.telephone" maxlength="30" autocomplete="off" />
              </el-form-item>
              <el-form-item label="电子邮件" prop="email">
                <el-input v-model.trim="form.email" maxlength="120" autocomplete="off" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">修 改</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <pswForm ref="pswform" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import store from '@/store'
import request from '@/utils/request'
import pswForm from './password'
import DefaultAvatar from '@/assets/avatar.png'
export default {
  name: 'Profile',
  components: {
    pswForm
  },
  data: function() {
    return {
      rules: {
        email: [
          {
            type: 'email',
            message: '邮箱格式不正确',
            trigger: 'blur'
          }
        ]
      },
      headers: {
        'Authorization': 'Bearer ' + getToken()
      },
      DefaultAvatar: DefaultAvatar,
      form: {
        email: '',
        telephone: '',
        mobile: '',
        duty: '',
        loginName: '',
        name: '',
        departmentName: ''
      },
      formLoading: false
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'avatar',
      'roles',
      'positions',
      'name'
    ])
  },
  created() {
    this.form.email = this.user.email
    this.form.mobile = this.user.mobile
    this.form.telephone = this.user.telephone
    this.form.duty = this.user.duty
    this.form.loginName = this.user.loginName
    this.form.departmentName = this.user.departmentName
    this.form.name = this.user.name
  },
  methods: {
    onSubmit: function() {
      this.$refs['eform'].validate(valid => {
        if (valid) {
          this.doUpdate()
        }
      })
    },
    doUpdate() {
      this.formLoading = true
      const param = this.form
      request({ url: '/person/updatePersonInfo', method: 'post', data: param }).then(res => {
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        // this.$message.success('提交成功！')
        this.formLoading = false
        this.user.email = this.form.email
        this.user.mobile = this.form.mobile
        this.user.telephone = this.form.telephone
        // store.dispatch('user/updateUserInfo', res.data.path)
      }).catch(err => {
        this.formLoading = false
        this.$message.error('修改错误！' + err.message)
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 1

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG、PNG、GIF 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 1MB!')
      }
      return isJPG && isLt2M
    },
    handleSuccess: function(res) {
      if (res.code === 200) {
        this.$notify({
          title: '头像修改成功！',
          type: 'success',
          duration: 2500
        })
        store.dispatch('user/setUserAvatar', res.data.url)
      } else {
        this.$message.error('头像修改失败！' + res.message)
      }
    },
    handleError: function(e) {
      this.$message.error('头像修改失败！')
    },
    changepsw: function() {
      this.$refs.pswform.change()
    }
  }
}
</script>
<style rel="stylesheet/scss" scoped lang="scss">
.user-info {
    padding: 0px;
    margin:0px;
    list-style: none;
    li{
      padding: 10px 0px;
      font-size: 14px;
    }
    .user-right{
      color:#483D8B;
      font-weight: 600;
    }
}
.avatar {
      width: 120px;
      height: 120px;
      display: block;
      border-radius: 50%;
      margin-bottom:10px;
    }
</style>
